<template>
  <el-container>
    <el-header>
      在线考试
    </el-header>
    <el-main>
      <div align="center">
        <p>
          试卷名称:{{paper.paperName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          试卷总分:{{paper.paperScore}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          考试时长:{{paper.paperTime}}
        </p>
        <br>
      </div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>一、单选题</span>
        </div>
        <div class="text item" v-for="(x,index) in signList">
          <p>{{index+1}}:{{x.quContent}}</p>
          <p>A:<input type="radio" value="A" :name="'s'+index" /><span>{{x.quAoption}}</span></p>
          <p>B:<input type="radio" value="B" :name="'s'+index" /><span>{{x.quBoption}}</span></p>
          <p>C:<input type="radio" value="C" :name="'s'+index" /><span>{{x.quCoption}}</span></p>
          <p>D:<input type="radio" value="D" :name="'s'+index" /><span>{{x.quDoption}}</span></p>
          <br>
        </div>

      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>二、多选题</span>
        </div>
        <div class="text item" v-for="(x,index) in moreList">
          <p>{{index+1}}:{{x.quContent}}</p>
          <p>A:<input type="checkbox" value="A" :name="'m'+index" /><span>{{x.quAoption}}</span></p>
          <p>B:<input type="checkbox" value="B" :name="'m'+index" /><span>{{x.quBoption}}</span></p>
          <p>C:<input type="checkbox" value="C" :name="'m'+index" /><span>{{x.quCoption}}</span></p>
          <p>D:<input type="checkbox" value="D" :name="'m'+index" /><span>{{x.quDoption}}</span></p>
          <br>
        </div>

      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>三、判断题</span>
        </div>
        <div class="text item" v-for="(x,index) in judgeList">
          <p>{{index+1}}:{{x.quContent}}</p>
          <p>√<input type="radio" value="√" :name="'j'+index" /></p>
          <p>×<input type="radio" value="×" :name="'j'+index" /></p>
          <br>
        </div>

      </el-card>
      <div align="center">
        <el-button type="success" size="mini" @click="submitPaper">提交试卷</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: "exam",
    data() {
      return {
        paperName: "试卷三",
        paper: {}, //预览试卷信息
        signList: [], //单选数组
        moreList: [], //多选数组
        judgeList: [], //判断数组
        answer: {
          sa: "", //单选答案
          ma: "", //多项答案
          ja: "" //判断答案
        },
      }
    },
    methods: {
      showPaper() {
        var self = this;
        this.$http.get("/paper/showPaper", {
          params: {
            "paperName": this.paperName,
          }
        }).then(function(rs) {
          self.paper = rs.data.data;

          for (var i = 0; i < self.paper.list.length; i++) {
            //添加单选题集合
            if (self.paper.list[i].quType == "单选题") {
              self.signList.push(self.paper.list[i]);

            } else if (self.paper.list[i].quType == "多选题") {
              self.moreList.push(self.paper.list[i]);

            } else {
              self.judgeList.push(self.paper.list[i]);

            }
          }

        }).catch(function(rs) {
          console.log(rs);
          self.$message("服务器连接错误");
        })
      },

      submitPaper() {
        //获取单选题答案
        this.answer.sa = "";
        for (var i = 0; i < this.signList.length; i++) {
          //属性选择器
          this.answer.sa += $("input[name='s" + i + "']:checked").val() + ",";


        }
        console.log(this.answer.sa);




        //获取判断题答案
        this.answer.ja = "";
        for (var i = 0; i < this.judgeList.length; i++) {
          //属性选择器
          this.answer.ja += $("input[name='j" + i + "']:checked").val() + ",";


        }
        console.log(this.answer.ja);
        //获取多选题答案
        this.answer.ma = "";

        for (var i = 0; i < this.moreList.length; i++) {
          var an = "";
          //each遍历选中的复选框的所有值
          $("input[name='m" + i + "']:checked").each(function() {
            an += $(this).val();
          })
          //如果an为空,说明用户没有做这道题
          if (an == "") {
            this.answer.ma += "undefine" + ",";

          } else {
            this.answer.ma += an + ",";
          }

        }
        console.log(this.answer.ma)

        var self = this;
        this.$http.get("/paper/countScore", {
          params: {
            "paperName": this.paperName,
            "sa": this.answer.sa,
            "ma": this.answer.ma,
            "ja": this.answer.ja,
          }
        }).then(function(rs) {
          self.$alert("你的此次考试成绩是:" + rs.data.data);


        }).catch(function(rs) {
          console.log(rs);
          self.$message("服务器连接错误");
        })

      },


      auntoSubmit() { //自动提交试卷
        //计数器对象
        //setInterval(回调函数，间隔时间(毫秒))
        var self = this;
        var time = setInterval(function() {
          self.paper.paperTime--;
          if (self.paper.paperTime == 5) {
            self.$message("你还要5秒钟做完试卷，5秒后自动提交试卷");

          } else if (self.paper.paperTime == 1) {
            self.$message("自动交接");
            //提交试卷
            self.submitPaper();

            //清除计时器
            clearInterval(time);
          }
        }, 60000);
      }

    },
    mounted() {
      //加载试卷
      this.showPaper();
      //运行自动提交试卷方法
      this.auntoSubmit();
    }
  }
</script>

<style>
</style>
